<template>
    <div class="goods-sheleves">
      <div :class="[`goods-wrap-${compData.data.mode}`]" :style="wrapStyle()">
        <template v-for="good in compData.data.goodsList" :key="good">
          <div class="item" :style="itemStyle()">
            <div class="item-wrap">
              <div class="tag" v-if="compData.data.tagStyle.show">
                <sa-image :url="compData.data.tagStyle.src" radius="0" :suffix="null"></sa-image>
              </div>
              <sa-image :url="good.image" size="64" :suffix="null"></sa-image>
              <div class="desc">
                <div
                  v-if="compData.data.goodsFields.title.show"
                  class="title sa-m-b-8 sa-table-line-1"
                  :style="{
                    color: compData.data.goodsFields.title.color,
                  }"
                >
                  {{ good.title }}
                </div>
                <div class="item-bounty sa-flex">
						<div class="brokerage sa-flex">
							佣金<text>￥{{parseFloat(good.price[0]*good.commission_money_rate/100).toFixed(2)}}</text>
						</div>
						<div class="ratio sa-flex">
							佣金比例
							<div class="">
								{{good.commission_money_rate}}%
							</div>
						</div>
					</div>
                <div
                  v-if="compData.data.goodsFields.price.show"
                  class="price"
                  :style="{
                    color: compData.data.goodsFields.price.color,
                  }"
                >
                  ￥{{ good.price[0] }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </template>
  
  <script setup>
    const props = defineProps(['compData']);
    console.log(props.compData.data.goodsList,'compData.data.goodsList');
    
    const w = {
      1: '50%',
      2: '49.5%',
      3: '32%',
    };
  
    function wrapStyle() {
      return {
        display: 'flex',
        'flex-wrap': `${props.compData.data.mode == 3 ? 'nowrap' : 'wrap'}`,
        margin: `-${props.compData.data.space / 2}px`,
      };
    }
  
    function itemStyle() {
      return {
        width: `${w[props.compData.data.mode]}`,
        padding: `${props.compData.data.space / 2}px`,
        'flex-shrink': 0,
        'border-top-left-radius': `${props.compData.data.borderRadiusTop}px`,
        'border-top-right-radius': `${props.compData.data.borderRadiusTop}px`,
        'border-bottom-left-radius': `${props.compData.data.borderRadiusBottom}px`,
        'border-bottom-right-radius': `${props.compData.data.borderRadiusBottom}px`,
        overflow: 'hidden',
      };
    }
  </script>
  
  <style lang="scss" scoped>
  .item-bounty {
					margin: 10px 0 10px;
                    width: 100%;
					.brokerage {
						color: #FA8B23;
						font-size: 10px;
                        width: 60px;
						text {
							font-size: 10px;
						}
					}

					.ratio {
						font-size: 11px;
						background-color: #3d3d3d;
						height: 14px;
						width: 99px;
						text-align: center;
						color: #F4E7DA;
						line-height: 14px;
                        padding: 0 0 0 5px;
						&>div {
							height: 14px;
							line-height: 14px;
							color: #3D3D3D;
							background-color: #f4e7da;
							width: 50px;
						}
					}
				}
    .goods-sheleves {
      .goods-wrap-1,
      .goods-wrap-2,
      .goods-wrap-3 {
        .item-wrap {
          background: #fff;
          // box-shadow: 0 5px 21px 0 rgba(234, 234, 234, 0.46);
          border-radius: 4px;
          position: relative;
          .tag {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            .sa-image {
              width: 36px !important;
              height: 22px !important;
            }
          }
          .sa-image {
            width: 100% !important;
            height: 110px !important;
          }
          .desc {
            padding: 10px;
            flex: 1;
            .name {
              font-size: 13px;
            }
            .price {
              font-size: 12px;
            }
          }
        }
      }
      .goods-wrap-2{
        justify-content: space-between;
        padding:0 5px;
      }
      .goods-wrap-1 {
        .item-wrap {
          display: flex;
          height: 64px;
          font-size: 12px;
          .sa-image {
            width: 64px !important;
            height: 100% !important;
          }
        }
      }
    }
  </style>
  